<template>
	<div class="filtrate-month-range-module">
			<el-date-picker
					class="date-picker-model"
					popper-class="date-picker-model-popper"
					v-model="datePickerModel"
					:type="datePickerConfig.type"
					:placeholder="datePickerConfig.placeholder"
					:value-format="datePickerConfig.valueFormat"
					:clearable="false"
					@change="(event) => changeTime(event)"
					:disabled-date="monthPickerDisabledOptions"
					size="small"
			/>
	</div>
</template>

<script setup>
import {defineEmits, ref, onMounted, defineProps, watch} from "vue";

const props = defineProps({
	monthRange: {
			type: Array,
			default: () => ([])
	}
});

watch(
	() => props?.monthRange,
	(newVal) => {
			datePickerModel.value = props?.monthRange
	},
	{deep: true}
)

const emit = defineEmits(['changeFiltrateTime'])

const datePickerModel = ref('')
const datePickerConfig = ref({
	type: 'monthrange',
	valueFormat: 'YYYY-MM'
})

const changeTime = (item) => {
	console.log(item);
	emit('changeFiltrateTime', item)
}

const monthPickerDisabledOptions = (time) => { // 月范围禁用校验
	let afterDate = new Date().getTime();
	return time.getTime() > afterDate;
}
</script>

<style scoped lang="less">
.filtrate-month-range-module {
	display: flex;
	align-items: center;
/*  .date-picker-model {
			width: 100px;
	}
	/deep/ .date-picker-model {
			width: 90px;
			height: 24px;
	}*/
	/deep/ .el-input__wrapper {
			background: rgba(33,112,207,0.2);
			box-shadow: inset 0px 0px 8px 0px #3D7FFF;
			border: 1px solid #67BAEF;
			.el-range-input, .el-range-separator {
					color: white;
			}
	}
}
:deep(.el-date-editor) {
	opacity: 1;
}
</style>
<style lang="less">
.date-picker-model-popper {
	.el-month-table td.disabled .cell {
			background-color: #6969694f !important;
			color: #ffffff47 !important;
	}
}
</style>